/**
 * 环形图表插件
 * author  aty
 */

;(function(){

	function CircleChart(options){
		if( !options.el ){
			throw new Error("Error: 缺少 el 参数");
		}
		this.canvas = document.querySelector(options.el);
		this.context = this.canvas.getContext('2d');
		this.width = this.canvas.width;
		this.height = this.canvas.height;

		this.options = {
			tiltRate:0.3,		//波浪弧度大小
			waveRate:0.3,		//波浪高度百分比
			maxValue:1,			//最大值
			sp:0,				//运动速度
			value:0,			//当前值
			name:"",			//名称
			unit:10				//波浪的分段数
		}

		$.extend(this.options,options);
		this.sp2 = this.options.sp;
		this.options.waveRate = Number(this.options.value)/Number(this.options.maxValue).toFixed(2);
		this.render();

	}

	CircleChart.prototype.render = function(){

		let self = this;

		this.context.clearRect(0, 0, this.width, this.height);

		this.clipCirlce();
		this.drawSine();
		this.drawText();

		requestAnimationFrame(function(){
			self.render();
		})
	}

	CircleChart.prototype.clipCirlce = function(){
		this.context.beginPath();
		this.context.strokeStyle = "#5DD1DD";	
		this.context.lineWidth = 1;	
		this.context.arc(this.width/2, this.height/2, this.height/2 - 4, 0, Math.PI*2,false);
		this.context.stroke();
		this.context.clip();
	}

	CircleChart.prototype.drawSine = function(){
		this.sp2-= 0.07;
		this.context.globalAlpha = 0.7;
		this.context.fillStyle = "#5B8FF9";
		this.context.beginPath();
	    var Stack = []; // 记录起始点和终点坐标
	    for (var i = 0; i < this.width; i++) {
	        var x = this.options.sp + i / this.options.unit;
	        var y = Math.sin(x) * this.options.tiltRate;
	        var dx = i;
	        var dy = this.width * (1 - this.options.waveRate)  - (this.options.unit * y);

	        this.context.lineTo(dx, dy);
	        Stack.push([dx, dy])
	    }
	    // 获取初始点和结束点
	    var startP = Stack[0]
	    var endP = Stack[Stack.length - 1]
	    this.context.lineTo(this.width, this.height);
	    this.context.lineTo(0, this.width);
	    this.context.lineTo(startP[0], startP[1])
	   
	    this.context.fill();
	    this.options.sp -= 0.04;
	    
	    var gradient =  this.context.createLinearGradient(0,this.width,this.width,this.height);
	    	gradient.addColorStop(0,"#5339FF");
	    	gradient.addColorStop(0.5,"rgba(38, 170, 255, 0.96)");
	    	gradient.addColorStop(1,"#0BF1FF");

	    this.context.fillStyle = gradient;
	    this.context.beginPath();
	    var Stack = []; // 记录起始点和终点坐标
	    for (var i = 0; i < this.width; i++) {
	        var x = this.sp2 + i / this.options.unit;
	        var y = Math.sin(x) * this.options.tiltRate;
	        var dx = i;
	        var dy = this.width * (1 - this.options.waveRate)  - (this.options.unit * y);
	        this.context.lineTo(dx, dy);
	        Stack.push([dx, dy])
	    }
	    // 获取初始点和结束点
	    var startP = Stack[0]
	    var endP = Stack[Stack.length - 1];
	    this.context.lineTo(this.width, this.height);
	    this.context.lineTo(0, this.width);
	    this.context.lineTo(startP[0], startP[1])
	    this.context.fill();

	    this.context.globalAlpha = 1;
	}

	CircleChart.prototype.drawText = function(){
		this.context.fillStyle = "#FFFFFF";
	    this.context.textAlign = 'center';
	    this.context.font="12px Verdana";
	    this.context.fillText(this.options.name, this.width/2, this.height/2.5);

	    this.context.font="bold 20px Verdana";
	    this.context.fillText(this.options.value, this.width/2, this.height/1.68);
	}


	window.CircleChart = CircleChart;

})();



